<template>
  <div v-viewer>
    <home-header></home-header>
    <div class="banner" :style="{backgroundImage:`url(${$store.state.UrlBase + details.bg})`}">
      <div class="deatilsInfo">
        <h4>{{details.title}}</h4>
        <p>
          <span>
            <el-icon :size="15" class="Deatilsicon">
              <Calendar />
            </el-icon>
            发表:&ensp; {{dayjs(details.createTime - 0).format('YYYY-MM-DD HH:mm')}}
          </span>
          &emsp; | &emsp;
          <span>
            <el-icon :size="15" class="Deatilsicon">
              <Document />
            </el-icon>
            字符统计:&ensp; {{details.info? setCount(details.info.length) :0 }}字节
          </span>

          &emsp; | &emsp;
          <span>
            <el-icon :size="15" class="Deatilsicon">
              <Paperclip />
            </el-icon>
            标签:&ensp;
            <el-tag size="small" effect="plain" type="success"> {{details.articleType}}</el-tag>
          </span>
        </p>
      </div>
    </div>

    <!-- 下面详情页 -->

    <div class="detailsInfoList">
      <!-- 左边详情页 -->
      <el-scrollbar height="800px" style="overflow: hidden; flex:1">
        <div class="infoList">
          <div class="infoTitle">
            {{details.title}}
          </div>

          <div class="infoDetails" id="article2" v-highlight v-html="detailsInfo">
          </div>

        </div>
      </el-scrollbar>
      <!-- 右边最新文章 -->
      <transition name="isShowAside">
        <div class="newInfo" v-if="detailsInfo" v-show="isShowAside">
          <!-- 目录页 -->
          <details-catalog>
            <u-anchor container="#article2" style="width: 100%;" target=".el-scrollbar__wrap"></u-anchor>
          </details-catalog>
        </div>
      </transition>
    </div>
    <details-copyright>
    </details-copyright>
    <details-comment v-if="details.title" :articleTitle="details.title"></details-comment>
    <footer>
      {{details.title}} |
      发表于：{{dayjs(details.createTime - 0).format('YYYY-MM-DD')}} |
      字符统计:
      {{details.info? setCount(details.info.length) :0 }}
    </footer>
  </div>
</template>
<script>
import { ElScrollbar } from 'undraw-ui'
import dayjs from 'dayjs'
import { useRoute } from 'vue-router'
import { reactive, toRefs, nextTick, provide, ref, onUnmounted } from 'vue'
import HomeHeader from '@/components/home/HomeHeader.vue'
import http from '@/utils/http'
import DetailsCopyright from '@/components/details/DetailsCopyright.vue'
export default {
  components: { HomeHeader, DetailsCopyright },
  name: 'ArticleDetaols',
  setup (props) {
    const route = useRoute()
    const data = reactive({
      details: {},
      isShowAside: true,
      detailsInfo: ''
    })
    // 这个被改了会被监听到的
    let domTitle = ref([])
    provide('domTitle', domTitle)

    // 请求数据
    http.get(`/article/single?id=${route.query.id}`).then(res => {
      data.details = res.data.info[0],
        data.detailsInfo = res.data.info[0].info
      nextTick(() => {
        // 获取到所有标题文件
        domTitle.value = initToc()
      })
    })
    // 获取到页面中的所有的锚点连接
    function initToc () {
      // 获取所有h1 h2 h3 标签
      let all_headings = document.querySelector('.infoDetails').querySelectorAll('h1, h2, h3,h4,h5')
      all_headings.forEach((item, index) => {
        item.id = `itemTitle${index}`
      })
      return all_headings
    }

    // 处理字节
    function setCount (count) {
      count = count > 1000 ? (count / 1000).toFixed(2) + '千 ' : count
      return count
    }
    // 计算屏幕尺寸
    if (window.innerWidth < 960) {
      data.isShowAside = false
    } else {
      data.isShowAside = true
    }
    window.onresize = () => {
      if (window.innerWidth < 960) {
        data.isShowAside = false
      } else {
        data.isShowAside = true
      }
    }
    onUnmounted(() => {
      window.onresize = null
    })
    return {
      ...toRefs(data),
      dayjs,
      setCount,
    }
  }
}
</script>
<style lang="scss" scoped>
.Deatilsicon {
  transform: translateY(3px);
}

.banner {
  display: flex;
  height: 400px;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: -1;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.deatilsInfo {
  user-select: none;
  text-align: center;
  h4 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28px;
    margin: 0 0 20px;
    letter-spacing: 3px;
    font-weight: 700;
  }
  p {
    span {
      font-size: 12px;
    }
  }
}
.detailsInfoList {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 30px auto;
  line-height: 1.8;
  .infoList {
    flex: 1;
    background: #fff;
    padding: 50px 40px;
    margin-right: 20px;
    overflow: auto;
    .infoTitle {
      width: 100%;
      color: #333;
      padding: 7px 0;
      margin: 6px 0;
      font-size: 20px;
      font-weight: 700;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      border-bottom: 2px solid #ddd;
      user-select: text !important;
    }
    .infoDetails {
      user-select: text !important;
      letter-spacing: 1px;
    }
  }
  .newInfo {
    width: 280px;
  }
}
</style>
